<template>
	<view>
		<!-- 加入顶部图片方式与发布的bar相同 -->
		<view style="width: 100%; background: #cb3f3f; height: auto; overflow: hidden;">
			<image mode="widthFix" class="top"></image>
		</view>

		<view class="content">
			<view class="topbox">
				<view class="row">
					<view class="title_before"></view>
					<rich-text style="font-size: 40rpx; font-weight: bold;" :nodes="title"></rich-text>
				</view>

				<view class="user_iss">
					<view class="row">
						<image class="user_img" :src="user.img"></image>
						<view class="col" style="flex: 1; margin: 10rpx 0">
							<view class="user_name">{{user.name}}</view>
							<view class="user_log">{{user.log}}</view>
						</view>

					</view>
				</view>

				<view class="u-content">
					<u-parse class="maincon" :html="content"></u-parse>
				</view>
				<view style="height: 100upx;"></view>

				<view style="position: fixed; bottom: 0; right:0upx; width: 100%;">
					<u-button v-if="Part" @click="button()" type="primary" shape="square" class="button">
						<u-loading v-if="loading" mode="flower" show></u-loading>已参加
					</u-button>
					<u-button v-else="Part" @click="button()" type="error" class="button">
						<u-loading v-if="loading" mode="flower" show></u-loading>参加活动
					</u-button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {//发布人的相关信息
					img: "",//头像图片
					name: "某某部门",
					log: "这里还是写个log"
				},

				title: [{//！！这里只用改一个地方，其他别改
					name: 'div',
					children: [{
						type: 'text',
						text: '度搜和爱上京少时诵诗书所所东AA阿大声道if京东if吉叟223232323 ' //标题写这里，其他别改
					}]
				}],
				//活动内容写这里，<p>是段落，<img>为图片，图片标注<p class="imgdetail">,具体看下面,注意最外面不是单引号，而是"`"!
				content: `
					<p>露从今夜白月佛IG福建省高级发动机盖第三方机构和后端是丰富的绝对是 sdf森岛帆高发个是故乡明</p>
					<br/>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					<p class="imgdetail">图1-3</p>
					<p>露从今夜白月佛IG福建省高级发动机盖第三方机构和后端是丰富的绝对是 sdf森岛帆高发个是故乡明</p>
					<p>露从今夜白月佛IG福建省高级发动机盖第三方机构和后端是丰富的绝对是 sdf森岛帆高发个是故乡明</p>
					<p>露从今夜白月佛IG福建省高级发动机盖第三方机构和后端是丰富的绝对是 sdf森岛帆高发个是故乡明</p>
				`,
				Part: false, //该用户是否参加了活动
				
				
				loading: false//不用传输
			}
		},
		methods: {
			button: function() {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.Part = this.Part ? false : true;
				}, 1000);

			}
		}
	}
</script>

<style>
	.content {
		padding: 20rpx 20rpx;
		background: #ffffff;
	}

	.top {
		width: 120%;
		height: 140rpx;
		margin-left: -30rpx;
	}


	.title {
		font-size: 60rpx;
		line-height: 80rpx;
	}

	.title_before {
		width: 10rpx;
		height: 1;
		background: #dfe2e5;
		margin-right: 16rpx;
	}

	.row {
		display: flex;
		flex-direction: row;
	}

	.col {
		display: flex;
		flex-direction: column;
	}

	.user_iss {
		width: 100%;
		height: 140rpx;
		margin-top: 30rpx;
		background: #f1f1f1;
		border-radius: 10rpx;
	}

	.user_img {
		margin-top: 10rpx;
		margin-left: 10rpx;
		width: 120rpx;
		height: 120rpx;
		background: #d3d3d3;
		border-radius: 100%;
	}

	.user_name {
		margin-left: 20rpx;
		height: 60rpx;
		line-height: 80rpx;
		font-size: 60rpx;
		font-weight: bold;
	}

	.user_log {
		margin-left: 20rpx;
		height: 40rpx;
		line-height: 76rpx;
		font-size: 30rpx;
	}

	.u-content {
		margin-top: 30rpx;
	}

	.maincon {
		font-size: 34rpx;
		color: #505050;
		text-indent: 64rpx;
	}

	.imgdetail {
		font-size: 28upx;
		text-indent: 0;
		color: #7a7a7a;
		text-align: center;
	}

</style>
